<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-09 11:09:24
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-10-11 15:45:59
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\views\mall\PreferentialOffer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-if="isVisible" class="preferential-modal" @click.self="closeModal">
    <div class="preferential-content">
      <strong>优惠</strong>
      <p style="color: #7d7d7f; font-size: 13px;">权益</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps({
  isVisible: Boolean
});
console.log(props);

// 定义 emit 事件
const emit = defineEmits(['close']);
console.log(emit);

// 关闭模态框的方法
const closeModal = () => {
  emit('close');
};

</script>

<style scoped>
.preferential-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%; /* 全屏的一半高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition: bottom 0.3s; /* 滑动动画 */
  z-index: 10000;
}

.preferential-content {
  width: 100%;
  background-color: white;
  padding: 20px;
  box-sizing: border-box;
  max-height: 300vh; /* 限制内容高度 */
  overflow-y: auto; /* 如果内容超出，可以滚动 */
  text-align: left;
  border-radius: 10px 10px 0px 0px;
  z-index: 10000;
}
</style>